<template>
	<a-card>
		<v-chart
			class="h-800"
			:option="chinaMapOptions"
			autoresize
		/>
	</a-card>
	<a-card>
		<v-chart
			class="h-300"
			:option="option"
			autoresize
		/>
	</a-card>
</template>

<script setup lang="ts">
import { registerMap } from 'echarts/core'
import VChart from 'vue-echarts'
import mapjson from './map'
import '@/utils/echart'

registerMap('china', mapjson)

const option = ref({
	title: {
		text: 'Traffic Sources',
		left: 'center'
	},
	tooltip: {
		trigger: 'item',
		formatter: '{a} <br/>{b} : {c} ({d}%)'
	},
	legend: {
		orient: 'vertical',
		left: 'left',
		data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines']
	},
	series: [
		{
			name: 'Traffic Sources',
			type: 'pie',
			radius: '55%',
			center: ['50%', '60%'],
			data: [
				{ value: 335, name: 'Direct' },
				{ value: 310, name: 'Email' },
				{ value: 234, name: 'Ad Networks' },
				{ value: 135, name: 'Video Ads' },
				{ value: 1548, name: 'Search Engines' }
			],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}
	]
})

const chinaMapOptions = {
	title: {
		text: ' 中国地图',
		textStyle: {
			color: '#9c05',
			fontWeight: 'bolder',
			fontSize: '25'
		},
		left: 'center'
	},
	tooltip: {
		//类型
		trigger: 'item',
		//{a}系列名称,{b}地区名称,{c}合并数值
		formatter: '地区:{b}<br/>确诊:{c}'
	},
	series: [
		{
			type: 'map',
			//后边还可以写成省份
			map: 'china',
			data: [
				{ name: '北京市', value: 200 },
				{ name: '湖北省', value: 20000 },
				{ name: '湖南省', value: 10000 },
				{ name: '河南省', value: 1200 },
				{ name: '浙江省', value: 8000 }
			],
			//显示省份名称的样式
			label: {
				show: true,
				color: 'red',
				fontSize: 12
				//  backgroundColor:'yellow'
			},
			//地图缩放比例
			zoom: 1,
			// itemStyle:{
			//   //   areaColor:'red',//地图区域的颜色
			//     borderColor:'blue'
			// },
			//高亮状态下的设置
			emphasis: {
				//显示省份名称的样式
				label: {
					color: '#fff',
					fontSize: 12
				},
				//地图区域多边形下的颜色
				itemStyle: {
					areaColor: 'green'
				}
			}
		}
	],
	visualMap: {
		//分段型
		type: 'piecewise',
		show: true,
		pieces: [
			// 不指定 max，表示 max 为无限大（Infinity）。
			{ min: 10000 },
			{ min: 1000, max: 9999 },
			{ min: 100, max: 999 },
			{ min: 10, max: 99 },
			{ min: 1, max: 9 },
			// 不指定 min，表示 min 为无限大（-Infinity）。
			{ value: 0 }
		],
		inRange: {
			color: ['#fff', '#ffaa85', '#660208']
			// color: ['red', 'red', 'red'],
		},
		//设置方块的宽度
		itemWidth: 10,
		itemHeight: 10
	}
}
</script>
